import React from 'react'
import { Carousel } from 'antd-mobile';
import axios from 'axios';
class Swiper extends React.Component {
  state = {
    Swiperdata: [],
    imgHeight: 220,
  }
  componentDidMount() {
    axios.get('http://157.122.54.189:9060/home/swiper').then(res =>{
      console.log(res.data);
      if(res.data.status === 200){
        this.setState({
          Swiperdata:res.data.body
        })
      }
    })
  }
  render() {
    return (
      <>
      <div style={{height:this.state.imgHeight}}>
      {this.state.Swiperdata.length > 0 && 
        <Carousel
          autoplay
          infinite
        >
          {this.state.Swiperdata.map(val => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={`http://157.122.54.189:9060${val.imgSrc}`}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
       }
      </div>
      </>
    );
  }
}

export default Swiper